<template>
	<!-- 登录后的个人中心 -->
	<view>
		<!-- 背景图+用户基本信息 -->
		<view class="user-space-head u-f-ajc">
			<image :src="getBgImg" mode="widthFix" lazy-load="false" @click="changeBgImg"></image>
			<view class="user-space-head-info u-f-ac u-f-column">
				<image :src="getUserPic" mode="widthFix" lazy-load="false" @click="changeUserPic"></image>
				<view class="user-info user-space-margin">
					{{user.username}}
				</view>
				<!-- <view class="user-info-des">
					{{userinfo.des?userinfo.des:''}}
				</view> -->
			</view>
		</view>

		<!-- 内容框 -->
		<view>
			<view class="uni-tab-bar">

					<!-- 信息 -->
					<swiper-item style="height:500upx;">
						<scroll-view :scroll-y="true" class="user-space-info">
							<view class="user-space-info-item">
								<view>账号信息</view>
								<view>用户ID：{{user.id}}</view>
								<view>
									{{location}}
								</view>
							</view>
							<view class="user-space-info-item">
								<view>用户信息</view>
								<view>用户名：{{user.username}}</view>
								<!-- <view>性别：{{userinfo.sex==0?'女':'男'}}</view>
								<view>真实姓名：{{userinfo.name?userinfo.name:''}}</view>
								<view>电话：{{userinfo.phone}}</view>
								<view>邮箱：{{userinfo.email?userinfo.email:''}}</view> -->
							</view>
							<view class="setting-list">
								<uni-list>
									<!-- <uni-list-item title="编辑个人信息" thumb="/static/icons/edit_info.png" @click="toeditinfo" />
									<uni-list-item title="修改密码" thumb="/static/icons/edit_pwd.png" @click="toeditpwd" />
									<uni-list-item title="关于我们" thumb="/static/icons/aboutus.png" @click="toaboutus" /> -->
									<uni-list-item title="我的地址" @click="tomyaddress" />
									<uni-list-item title="编辑个人信息" @click="toeditinfo" />
									<uni-list-item title="修改密码" @click="toeditpwd" />
									<uni-list-item title="关于我们" @click="toaboutus" />
									<uni-list-item title="退出登录" @click="tulayout" />
								</uni-list>
							</view>
							<view class="version u-f-ajc" style="color: #AAAAAA; font-size: 20upx;">v.1.0.0 beta</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
    // 注册一个进度条
    var _self;

    export default {
        data() {
            return {
                percent:0,
				user: {},
				location: '',
            }
        },
        onShow() {
            var that = this;
			this.$uni.request({
				url: '/user/getUserById',
			}).then(r => {
				this.user = r.user
			});
        },
        methods: {
			//跳转我的地址
			tomyaddress() {
				uni.redirectTo({
					url: 'user_address',
					animationType: 'slide-in-left',
					animationDuration: 200
				})
			},
           //跳转修改密码
           toeditpwd() {
           	uni.redirectTo({
           		url: 'edit_pwd',
           		animationType: 'slide-in-left',
           		animationDuration: 200
           	})
           },
           //跳转编辑信息
           toeditinfo() {
           	uni.redirectTo({
           		url: 'edit_userinfo',
           		animationType: 'pop-in',
           		animationDuration: 200
           	})
           },
           //跳转关于我们
           toaboutus() {
           	uni.redirectTo({
           		url: 'aboutus',
           		animationType: 'pop-in',
           		animationDuration: 200
           	})
           },
			tulayout() {
				var that = this;
				var that = this;
				this.$uni.request({
					url: '/user/tologout',
				}).then(r => {
					uni.redirectTo({
						url: 'user_unlogin',
						animationType: 'pop-in',
						animationDuration: 200
					})
				});
				
			},
        }
    }
</script>

<style>
	@import url("/static/css/uni.css");

	.user-space-margin {
		margin: 20upx 0;
	}

	.user-space-head {
		position: relative;
		height: 550upx;
		overflow: hidden;
	}

	.user-space-head>image {
		width: 100%;
	}

	.user-space-head-info {
		position: absolute;
		top: 150upx;
	}

	.user-space-head-info>image {
		width: 150upx;
		height: 150upx;
		border-radius: 100%;
		box-shadow: 2upx 2upx 15upx grey;
	}

	.user-info {
		color: #FFFFFF;
		font-size: 35upx;
		font-weight: bold;
		text-shadow: 2upx 2upx 15upx #333333;
	}

	.user-info-des {
		color: #FFFFFF;
		font-size: 30upx;
		text-shadow: 2upx 2upx 15upx #333333;
	}

	.swiper-tab-list {
		color: #969696;
		font-weight: bold;
	}

	.uni-tab-bar .active {
		color: #343434;
	}

	.active .swiper-tab-line {
		border-bottom: 6upx solid #007AFF;
		width: 70upx;
		margin: auto;
		border-top: 6upx solid #007AFF;
		border-radius: 20upx;
	}

	.uni-swiper-tab {
		border-bottom: 1upx solid #FFFFFF;
	}

	.dairy-list {
		padding: 20upx;
	}

	.dairy-list-left {
		flex-shrink: 0;
	}

	.dairy-list-left>image {
		width: 90upx;
		height: 90upx;
		border-radius: 100%;
	}

	.dairy-list-right {
		flex: 1;
		margin-left: 20upx;
		margin-right: 10upx;
		border-bottom: 1upx solid #EEEEEE;
		padding-bottom: 10upx;
	}

	.dairy-list-right>view {
		color: #aaaaaa;
	}

	.user-space-info-item {
		padding: 20upx 0;
		border-bottom: 1upx solid #EEEEEE;
		margin: 0 30upx;
	}

	.user-space-info-item>view {
		color: #AAAAAA;
	}

	.user-space-info-item>view:first-child {
		color: #333333;
		font-size: 35upx;
		padding: 15upx 0;
	}

	.setting-list {
		padding: 10upx 0;
		padding-right: 30upx;
	}
</style>
